<!-- 个人中心 -->
<template>
	<view class="page">
		<view class="me-main">
			<view class="qr-box" @click="qrCode">
				<u-icon name="bianji" custom-prefix="iconfont" color="#fff"></u-icon>
			</view>
			<view class="infoa-box">
				<view class="avatar-box" @click="editBtn">
					<u-image width="130" height="130" shape="circle" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220822/45507ecf6923432b8608b36e8f6ac94e.jpg"></u-image>
				</view>
				<view class="right-box">
					<view class="nickname-box">
						<view class="vip-tag-box">
							<view class="nickname">尼克</view>
							<view class="vip-tag" @click="toVip">VIP</view>
						</view>
						<view class="user-id">ID: 223423423</view>
					</view>
					<view class="main-btn" @click="editBtn">签到</view>
				</view>
			</view>
			<view class="num-box">
				<view class="num-tab">
					<view>30</view>
					<view class="num-text">关注</view>
				</view>
				<view class="num-tab">
					<view>20</view>
					<view class="num-text">粉丝</view>
				</view>
				<view class="num-tab" @click="fangke">
					<view>200</view>
					<view class="num-text">访客</view>
					<view class="read-dot"></view>
				</view>
			</view>
		</view>
		<view class="main-box">
			
			<view class="order-box">
				<view class="box-header">
					<view class="order-title">订单中心</view>
					<view class="more-box">
						<view>查看全部</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view> 
				<view class="list-tab-box">
					<view class="list-tab-item">
						<view class="tab-icon-box">
							<image class="tab-icon" src="../../static/dfk.png"></image>
							<view class="tab-num">
								<span>5</span>
							</view>
						</view>
						<view class="tab-label">待付款</view>
					</view>
					<view class="list-tab-item">
						<view class="tab-icon-box">
							<image class="tab-icon" src="../../static/djd.png"></image>
							<view class="tab-num">
								<span>50</span>
							</view>
						</view>
						<view class="tab-label">待接单</view>
					</view>
					<view class="list-tab-item">
						<image class="tab-icon" src="../../static/time.png"></image>
						<view class="tab-label">进行中</view>
					</view>
					<view class="list-tab-item">
						<image class="tab-icon" src="../../static/dpj.png"></image>
						<view class="tab-label">待评价</view>
					</view>
				</view>
			</view>
			
			<view class="main-tab-box">
				<view class="main-tab" @click="gamePage" >
					<view class="main-tab-text">
						<view>我的钱包</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="amount-box">
						<view>200</view>
						<view class="cash-btn">立即提现</view>
					</view>
				</view>
				<view class="main-tab" @click="donTai">
					<view class="main-tab-text">
						<view>我的动态</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view>20</view>
				</view>
			</view>
			
			<view class="main-tab-box">
				<view class="main-tab" @click="openCoin">
					<view class="main-tab-text">
						<view>我的趣豆</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="amount-box">
						<view>30</view>
						<!-- <view class="cash-btn">0趣豆可提现</view> -->
					</view>
				</view>
				<view class="main-tab" @click="openIdCard">
					<view class="main-tab-text">
						<view>单身认证</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view>已认证</view>
				</view>
			</view>
			
			<view class="card-box">
				<view class="card-title">我的服务</view>
				<view class="tab-box">
					<view class="tab-item">
						<image class="tab-icon" src="../../static/coin.png"></image>
						<view class="tab-label">钱包</view>
					</view>
					<view class="tab-item">
						<image class="tab-icon" src="https://static.iocoder.cn/mall/54362ba5c45d4774bda6113abf746b39nhpqbam7c1.png"></image>
						<view class="tab-label">认证</view>
					</view>
					<view class="tab-item">
						<image class="tab-icon" src="https://static.iocoder.cn/mall/54362ba5c45d4774bda6113abf746b39nhpqbam7c1.png"></image>
						<view class="tab-label">注销</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				userId: 0,
				user: {
					nickName: '未知',
					signName: 'TA很神秘，什么也没留下'
				},
			}
		},
		methods: {
			editBtn() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/edit',
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #faf1f1;
	}
	.me-main {
		background-image: linear-gradient(0deg, #180f34, #2b4ea9);
		padding: 15px;
		display: flex;
		padding-top: 50px;
		flex-direction: column;
		padding-bottom: 50px;
		padding-top: 200rpx;
	}
	.infoa-box {
		display: flex;
		align-items: center;
		flex: 1;
		margin-bottom: 15px;
	}
	.nickname {
		font-size: 34rpx;
		margin-right: 5px;
		color: #fff;
	}
	.right-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		padding-left: 15px;
	}
	.status-tag {
		background-color: antiquewhite;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 20px;
		padding: 3px 10px;
		color: #19a6a6;
	}
	.avatar-box {
		padding: 6rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}
	.main-btn {
		display: flex;
		align-items: center;
		color: #8e8383;
		background: linear-gradient(90deg,#ffe157,#eec10f);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		padding: 3px 15px;
		color: #282828;
		font-size: 12px;
	}
	.num-box {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}
	.num-tab {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 36rpx;
		position: relative;
		color: #fff;
	}
	.num-text {
		font-size: 22rpx;
		color: #8e8383;
	}
	.main-box {
		background-color: #faf1f1;
		width: 100%;
		padding: 15px;
		position: relative;
		padding-top: 95px;
	}
	.main-tab-box {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	.main-tab {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 15px;
		border-radius: 7px;
		flex: 1;
		margin-right: 15px;
		color: #19a6a6;
		font-size: 26rpx;
	}
	.main-tab-box .main-tab:last-child{
		margin-right: 0;
	}
	.main-tab-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		color: #363f3f;
		font-size: 30rpx;
		line-height: 10px;
	}
	.coin-tab {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
	}
	.coin-title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
	}
	.more-btn {
		display: flex;
		align-items: center;
		line-height: 10px;
		color: #19a6a6;
		font-size: 22rpx;
	}
	.vip-box {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.amount-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cash-btn {
		background-color: #d09e9e;
		color: #fff;
		padding: 3px 10px;
		font-size: 20rpx;
		border-radius: 20px;
	}
	.qingtong {
		margin-right: 30px;
		width: 35px;
		height: 35px;
	}
	.baiyin {
		margin-right: 30px;
		width: 25px;
		height: 25px;
	}
	.gold {
		width: 20px;
		height: 20px;
	}
	.vip-text {
		font-size: 24rpx;
		margin-left: 1px;
	}
	.up-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.up-btn {
		background-color: #4d9df4;
		padding: 3px 10px;
		color: #fff;
		font-size: 22rpx;
		border-radius: 20rpx;
	}
	.vip-text-box {
		display: flex;
		align-items: center;
	}
	.vip-text-tip {
		font-size: 22rpx;
		color: #eb8e8e;
		margin-left: 15px;
	}
	.vip-tag-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.vip-tag {
		background-color: #ffd32f;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 18rpx;
		color: #fff;
	}
	.vip-tag-no {
		background-color: #d2e7fe;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 18rpx;
		color: #fff;
	}
	.qr-box {
		position: absolute;
		top: 100rpx;
		font-size: 50rpx;
		color: #0e0f0f;
	}
	.read-dot {
		background-color: #d09e9e;
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 4rpx;
		right: 60rpx;
		border-radius: 100%;
	}
	
	.card-box {
		background-color: #fff;
		border-radius: 7px;
		padding: 10px;
	}
	.card-title {
		font-size: 32rpx;
		padding: 5px;
	}
	.list-tab-box {
		display: flex;
		flex-wrap: wrap;
		height: 80px;
	}
	.list-tab-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		flex: 1;
	}
	.tab-box {
		display: flex;
		flex-wrap: wrap;
	}
	.tab-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		padding: 10px 0;
	}
	.tab-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10px;
	}
	.tab-label {
		font-size: 30rpx;
	}
	.order-box {
		background-color: #fff;
		border-radius: 7px;
		position: absolute;
		left: 14px;
		top: -45px;
		right: 15px;
		padding-bottom: 10px;
	}
	.order-title {
		font-size: 32rpx;
	}
	.user-id {
		color: #8e8383;
		font-size: 10px;
	}
	.box-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		padding-bottom: 0;
	}
	.more-box {
		display: flex;
		line-height: 20px;
		color: #666;
		font-size: 26rpx;
	}
	.tab-icon-box {
		display: flex;
		position: relative;
	}
	.tab-num {
		min-width: 6px;
		background-color: #d09e9e;
		color: #fff;
		border-radius: 15px;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 10px;
		padding: 0 4px;
	}
</style>
